<div class="toggle">
  <input type="checkbox" />
  <label></label>
</div>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: switch, realistic, toggle */
.toggle {
  position: relative;
  box-sizing: border-box;
}
.toggle input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.toggle label {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.toggle label:before {
  content: "";
  width: 70px;
  height: 40px;
  background: #fff;
  border: 2px solid #ddd;
  box-shadow: inset -30px 0 0 #666;
  position: relative;
  display: inline-block;
  border-radius: 20px;
  box-sizing: border-box;
  transition: 0.25s ease-in;
}

.toggle label:after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  left: 10px;
  top: 10px;
  border-radius: 50%;
  background: #fffdfd;
  box-shadow: inset -8px -5px #333;
  transition: 0.2s ease-in-out;
}

.toggle input[type="checkbox"]:checked + label:before {
  box-shadow: inset 30px 0 0 #ffeb00;
}
.toggle input[type="checkbox"]:checked + label:after {
  box-shadow: inset 0 0 0 2px #fff;
  background: #ffbc00;
  left: 39px;
  top: 8px;
  border: 2px dashed #fff;
}

</style>
    